<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--meta:vp-->
    <!--user-scalabe=no-->
    <meta name="viewport" content="width=device-width,user-scalabe=no,initial_scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta>
    <title>zepto黑马轮播图</title>
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="index.css">


</head>
<body>
<div class="hm_layout"></div>
<!--探索头部-->
<header class="hm_header">
    <div class="hm_header_box">
        <a href="" class="icon_logo"></a>
        <!--搜索按钮-->
        <form action="#">
            <span class="icon_search"></span>
            <input type="search" placeholder="提示占位">
        </form>
        <a href="#" class="login">登录</a>
    </div>
</header>
<!--轮播图-->
<div class="hm_banner">
    <ul class="clearfix">
        <li><a href="#"><img src="images/l8.jpg" alt=""></a></li><!-- 第一张图片向左滑动的时候出现最后一张图片 -->
        <li><a href="#"><img src="images/l1.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/l2.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/l3.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/l4.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/l5.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/l6.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/l7.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/l8.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/l1.jpg" alt=""></a></li> <!-- 增加这个为了实现轮播无缝切换 -->
    </ul>
    <ul>
        <li class="now"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<!--导航栏-->
<div class="hm_nav">
    <ul class="clearfix">
        <li><a href="#"><img src="./images/nav0.png" alt=""><p>分类查询</p></a></li>
        <li><a href="#"><img src="./images/nav1.png" alt=""><p>黑马超市</p></a></li>
        <li><a href="#"><img src="./images/nav2.png" alt=""><p>购物车</p></a></li>
        <li><a href="#"><img src="./images/nav3.png" alt=""><p>个人中心</p></a></li>
        <li><a href="#"><img src="./images/nav4.png" alt=""><p>充值中心</p></a></li>
        <li><a href="#"><img src="./images/nav5.png" alt=""><p>黑马理财</p></a></li>
        <li><a href="#"><img src="./images/nav6.png" alt=""><p>黑马培训</p></a></li>
        <li><a href="#"><img src="./images/nav7.png" alt=""><p>黑马圈子</p></a></li>
    </ul>
</div>
<!--商品-->
<main class="hm_product">
    <!--商品盒子-->
    <section class="product_box hm_sk">
        <!--头部-->
        <div class="product_box_tit no_border">
            <div class="f_left m_l10">
                <span class="sk_icon"></span>
                <span class="sk_name m_l10">掌上秒杀</span>
                <div class="sk_time m_l10">
                    <span>0</span>
                    <span>0</span>
                    <span>:</span>
                    <span>0</span>
                    <span>0</span>
                    <span>:</span>
                    <span>0</span>
                    <span>0</span>
                </div>
            </div>
            <div class="f_right m_r10"><a href="#">更多</a></div>
        </div>
        <!--内容-->
        <div class="product_box_con">
            <ul class="clearfix">
                <li>
                    <a href="#">
                        <img src="images/detail01.jpg" alt="">
                        <p>&yen;10.00</p>
                        <p>&yen;100.00</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/detail02.jpg" alt="">
                        <p>&yen;10.00</p>
                        <p>&yen;100.00</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/detail02.jpg" alt="">
                        <p>&yen;10.00</p>
                        <p>&yen;100.00</p>
                    </a>
                </li>
            </ul>
        </div>
    </section>

    <!--商品子盒子-->
    <section class="product_box">
        <!--头部-->
        <div class="product_box_tit"><h3>黑马超市</h3></div>
        <!--内容-->
        <div class="product_box_con clearfix">
            <a href="#" class="f_left w_50 b_right">
                <img src="images/cp1.jpg" alt=""/>
            </a>
            <a href="#" class="f_right w_50 b_bottom">
                <img src="images/cp2.jpg" alt=""/>
            </a>
            <a href="#" class="f_right w_50">
                <img src="images/cp3.jpg" alt=""/>
            </a>
        </div>
    </section>

    <!--商品子盒子-->
    <section class="product_box">
        <!--头部-->
        <div class="product_box_tit"><h3>黑马超市</h3></div>
        <!--内容-->
        <div class="product_box_con clearfix">
            <a href="#" class="f_right w_50 b_right">
                <img src="images/cp4.jpg" alt=""/>
            </a>
            <a href="#" class="f_left w_50 b_bottom">
                <img src="images/cp5.jpg" alt=""/>
            </a>
            <a href="#" class="f_left w_50">
                <img src="images/cp6.jpg" alt=""/>
            </a>
        </div>
    </section>

    <!--商品子盒子-->
    <section class="product_box">
        <!--头部-->
        <div class="product_box_tit"><h3>黑马超市</h3></div>
        <!--内容-->
        <div class="product_box_con clearfix">
            <a href="#" class="f_left w_50 b_right">
                <img src="images/cp1.jpg" alt=""/>
            </a>
            <a href="#" class="f_right w_50 b_bottom">
                <img src="images/cp2.jpg" alt=""/>
            </a>
            <a href="#" class="f_right w_50">
                <img src="images/cp3.jpg" alt=""/>
            </a>
        </div>
    </section>
</main>

<!--引入核心文件-->
<script src="zepto.js"></script>
<!--引入扩张性选择器-->
<script src="selector.js"></script>
<!--动画模块-->
<script src="fx.js"></script>
<!--引入移动touch-->
<script src="touch.js"></script>
<script>
    $(function () {
        var $banner = $(".hm_banner");
        var width = $banner.width();
        //图片盒子
        var imageBox = $banner.find("ul:eq(0)");
        //指示点盒子
        var pointBox = $banner.find("ul:eq(1)");
        //指示点
        var points = pointBox.find("li");

        var animateFuc=function () {
            imageBox.animate({
                //   "transform":'translateX('+(-index*width)+'px)'
                "transform":'translateX('+(-index*10)+'%)'
            },500,"ease",function () {
                if (index >=9){
                    index = 1;
                    imageBox.css({
                        //   "transform":'translateX('+(-index*width)+'px)'
                        "transform":'translateX('+(-index*10)+'%)'
                    })
                }else if (index <= 0){
                    index=8;
                    imageBox.css({
                        //   "transform":'translateX('+(-index*width)+'px)'
                        "transform":'translateX('+(-index*10)+'%)'
                    })
                }
            });
            points.removeClass("now").eq(index-1).addClass("now");
            if (index==9){
                points.removeClass("now").eq(0).addClass("now");
            }
        };


        var index = 1;
        var timer = setInterval(function () {
            index++;
            animateFuc();
        },3000);
        //左滑动
        imageBox.on("swipeLeft",function () {
            index++;
            animateFuc();
        });
        //右滑动
        imageBox.on("swipeRight",function () {
            index--;
            animateFuc();
        });
    })
</script>
</body>
</html>